<template>
  <div class="dialog">
    <div id="container">
      <div id="output"></div>
    </div>
    <div class="header">
      <div class="header-left">
        <img src="../assets/navtop-w.png" alt="">
      </div>
      <!-- <div class="header-right">
        <p>
        <span>上海市医药供应链第三方药品追溯平台</span></br>
        <span>Shanghai Medical Supply ChainThird-party Drug Traceability Platform</span>
      </p>
      </div> -->
    </div>
    <div title="登陆" width="30%" class=login>
      <div class="login-label">
        <span>登录</span>
      </div>
      <el-form :model="adminForm" ref="adminForm" class="adminForm" :rules="login_rules">
        <el-form-item prop="username">
          <span class="icon-label">
            <img src="../assets/icon-05.png" alt="">
          </span>
          <el-input type="text" v-model="adminForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="enterprise">
          <span class="icon-label">
            <img src="../assets/icon-06.png" alt="">
          </span>
          <el-input type="text" v-model="adminForm.enterprise" auto-complete="off" placeholder="企业编号为八位数字">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <span class="icon-label">
            <img src="../assets/icon-07.png" alt="">
          </span>
          <el-input type="password" v-model="adminForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item class="btn-group">
          <el-button type="primary" style="width:100%" @click="submitForm">登录</el-button>
        </el-form-item>
        <el-form-item class="text-right" style="margin-bottom:0px;">
          <router-link class="clickable" style="float:right" to="signup">企业入驻>></router-link>
          <span class="clickable pass-forgot">忘记密码</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Login',
    data() {
      var checkEnterprise = (rule, value, callback) => {
        var patt = /^[0-9]*$/
          if (!value) {
            return callback(new Error('企业编号不能为空'));
          }
          setTimeout(() => {
            if (patt.test(value) == false) {
              callback(new Error('请输入数字值'));
            } else {
              if (value.toString().length != 8) {
              
                callback(new Error('企业编号必须为8位'));
              } else {
                callback();
              }
            }
          }, 10);}
          return {
            msg: 'Vue-Login',
            dialogVisible: true,
            adminForm: {
              username: '',
              enterprise: '',
              password: ''
            },
            login_rules: {
              username: [{
                required: true,
                message: '请输入用户名',
                trigger: 'change'
              }, ],
              enterprise: [{
                validator: checkEnterprise,
                trigger: 'change'
              }],
              password: [{
                required: true,
                message: '请输入密码',
                trigger: 'change'
              }],
            }
          }
        },
        methods: {
          submitForm() {
            const that = this
            // this.$store.commit('super')
            this.$refs['adminForm'].validate((valid) => {
              if (valid) {
                that.$http({
                  url: '/login/',
                  method: 'post',
                  data: that.adminForm
                }).then(response => {
                  // success callback
                  console.log(response.data)
                  that.$store.commit('admin', {
                    token: response.data.token,
                    id: response.data.user.id,
                    username: response.data.user.username,
                    user_type: response.data.user.user_type,
                    enterprise: that.adminForm.enterprise
                  })
                  that.$message({
                    message: '登陆成功',
                    showClose: true,
                    type: 'success'
                  });
                  if (that.adminForm.enterprise == '00000000') {
                    this.$router.push({
                      path: 'home/Government_charts'
                    })
                  } else {
                    that.$router.push({
                      path: 'home/Company_charts'
                    })
                  }

                }).catch(error => {
                  console.log(error)
                  if (error.response) {
                    // The request was made and the server responded with a status code
                    // that falls out of the range of 2xx
                    console.log(error.response.data);
                    // console.log(error.response.status);
                    // console.log(error.response.headers);
                  } else if (error.request) {
                    console.log(error.request);
                  } else {
                    console.log('Error', error.message);
                  }
                  // console.log(error.config);
                  that.$message({
                    message: '登陆失败',
                    showClose: true,
                    type: 'error'
                  });
                });
              }
            })
          }
        },
        mounted: function () {
          // 初始化 传入dom id
          var victor = new Victor("container", "output");
          var theme = [
            ["#002c4a", "#005584"],
            ["#35ac03", "#3f4303"],
            ["#ac0908", "#cd5726"],
            ["#18bbff", "#00486b"]
          ]
          $(".color li").each(function (index, val) {
            var color = theme[index];
            $(this).mouseover(function () {
              victor(color).set();
            })

          });
        },
    }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  html,
  body {
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    width: 100%;
  }

  .dialog {
    width: 100%;
    height: 100%;
    background: url('../assets/background.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .login {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -160px;
    width: 320px;
    min-height: 300px;
    padding: 20px;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .login p {
    color: red;
    text-align: left;
  }
  /* .AdminForm{
    
  } */

  .text-right {
    text-align: right;
  }

  .clickable {
    color: white;
    cursor: pointer;
  }

  .login {
    margin-right: 20px
  }

  .header {
    position: fixed;
    height: 60px;
    text-align: left;
    padding: 30px;
  }

  .header-left {
    width: 440px;
    height: auto;
    border-radius: 50%;
    float: left;
    margin-right: 20px;
  }

  .header-left img {
    width: 100%;
  }

  .header-right {
    padding-top: 3px;
    float: left;
    height: 60px;
    width: auto;
    color: white;
    font-weight: bold;
  }

  .header-right>p>span:first-child {
    font-size: 23px;
  }

  .header-right>p>span:last-child {
    font-size: 10px;
  }

  .login-label {
    width: 300px;
    margin: 0 auto;
    border-left: 3px solid #409EFF;
    text-align: left;
    font-size: 20px;
    color: white;
    padding-left: 10px;
    margin-bottom: 20px;
  }

  .btn-group {
    margin-bottom: 0px;
  }

  .el-input {
    width: 100%!important;
  }

  .el-input>>>input {
    border: 2px solid #eff1f7;
    border-radius: 0px;
    padding-left: 40px!important;
  }

  .el-input>>>input:focus {
    border: 2px solid #409EFF;
  }

  .pass-forgot {
    float: left;
    /* color: #b8bfcd; */
    /* font-weight: 700; */
  }
  /* .pass-forgot:hover {
    color: #007fff!important;
  } */

  .icon-label {
    position: absolute;
    left: 13px;
    top: 5px;
    z-index: 2;
    pointer-events: none
  }

  #container {
    position: absolute;
    height: 100%;
    width: 100%;
  }

  #output {
    width: 100%;
    height: 100%;
  }

</style>
